<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" height="150" width="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext && canvas.getContext("2d");
        // 增加填充矩形渐变色
        const fillGradient = ctx.createLinearGradient(0, 0, 30, 30);
        fillGradient.addColorStop(0, "white");
        fillGradient.addColorStop(1, "black");
        ctx.fillStyle = fillGradient;
        ctx.fillRect(0, 0, 30, 30);

        // 增加描边矩形的渐变
        const strokeGradient = ctx.createLinearGradient(50, 0, 100, 100);
        strokeGradient.addColorStop(0, "red");
        strokeGradient.addColorStop(1, "green");
        ctx.strokeStyle = strokeGradient;
        ctx.strokeRect(50, 0, 100, 100); 
    }
</script>
</body>
</html>